<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
    template="/WEB-INF/mobile.xhtml">
    
    <ui:define name="content">
        <pm:content styleClass="jqm-content">
            <h1>DataList</h1>
            <p>DataList presents a collection of data in list layout.</p>
            
            <h2 class="first">Basic</h2>
            <p></p>
            <p:dataList value="#{dtBasicView.cars}" var="car">
				<h:outputText value="#{car.brand}, #{car.year}, #{car.color}" />
			</p:dataList>
            
            <h2>Ordered</h2>
            <p></p>
            <p:dataList value="#{dtBasicView.cars}" var="car" type="ordered">
				<h:outputText value="#{car.brand}, #{car.year}, #{car.color}" />
			</p:dataList>
            
            <h2>Advanced</h2>
            <p>Images, Links, Inset layout, formatting, header and footer.</p>
            <p:dataList value="#{dtBasicView.cars}" var="car" pt:data-inset="true">
                <f:facet name="header">
                    List of Cars
                </f:facet>
                <h:outputLink value="#">
                    <p:graphicImage name="demo/images/car/#{car.brand}-big.gif" />
                    <h2>#{car.id}</h2>
                    <p>#{car.brand}</p>
                    <p class="ui-li-aside"><strong>#{car.year}</strong></p>
                </h:outputLink>
                <f:facet name="footer">
                    List of Cars
                </f:facet>
			</p:dataList>
            
            <h2>Source</h2>
            <p:accordionPanel activeIndex="-1" multiple="true">
                <p:tab title="dataList.xhtml">
                    <pre class="brush:xml">
&lt;h2 class="first"&gt;Basic&lt;/h2&gt;
&lt;p:dataList value="\#{dtBasicView.cars}" var="car"&gt;
    &lt;h:outputText value="\#{car.brand}, \#{car.year}, \#{car.color}" /&gt;
&lt;/p:dataList&gt;

&lt;h2&gt;Ordered&lt;/h2&gt;
&lt;p:dataList value="\#{dtBasicView.cars}" var="car" type="ordered"&gt;
    &lt;h:outputText value="\#{car.brand}, \#{car.year}, \#{car.color}" /&gt;
&lt;/p:dataList&gt;

&lt;h2&gt;Advanced&lt;/h2&gt;
&lt;p&gt;Images, Links, Inset layout, formatting, header and footer.&lt;/p&gt;
&lt;p:dataList value="\#{dtBasicView.cars}" var="car" pt:data-inset="true"&gt;
    &lt;f:facet name="header"&gt;
        List of Cars
    &lt;/f:facet&gt;
    &lt;h:outputLink value="\#"&gt;
        &lt;p:graphicImage name="demo/images/car/\#{car.brand}-big.gif" /&gt;
        &lt;h2&gt;\#{car.id}&lt;/h2&gt;
        &lt;p&gt;\#{car.brand}&lt;/p&gt;
        &lt;p class="ui-li-aside"&gt;&lt;strong&gt;\#{car.year}&lt;/strong&gt;&lt;/p&gt;
    &lt;/h:outputLink&gt;
    &lt;f:facet name="footer"&gt;
        List of Cars
    &lt;/f:facet&gt;
&lt;/p:dataList&gt;             
                    </pre>
                </p:tab>
                <p:tab title="BasicView.java">
                    <pre name="code" class="brush:java">
package org.primefaces.showcase.view.data.datatable;

import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import org.primefaces.showcase.domain.Car;
import org.primefaces.showcase.service.CarService;

@ManagedBean(name="dtBasicView")
@ViewScoped
public class BasicView implements Serializable {
    
    private List&lt;Car&gt; cars;
    
    @ManagedProperty("\#{carService}")
    private CarService service;

    @PostConstruct
    public void init() {
        cars = service.createCars(10);
    }
    
    public List&lt;Car&gt; getCars() {
        return cars;
    }

    public void setService(CarService service) {
        this.service = service;
    }
}
                    </pre>
                </p:tab>
            
                <p:tab title="CarService.java">
                    <pre name="code" class="brush:java">
package org.primefaces.showcase.service;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.showcase.domain.Car;

@ManagedBean(name = "carService")
@ApplicationScoped
public class CarService {
    
    private final static String[] colors;
	
	private final static String[] brands;
    
    static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";
		
		brands = new String[10];
		brands[0] = "BMW";
		brands[1] = "Mercedes";
		brands[2] = "Volvo";
		brands[3] = "Audi";
		brands[4] = "Renault";
		brands[5] = "Fiat";
		brands[6] = "Volkswagen";
		brands[7] = "Honda";
		brands[8] = "Jaguar";
		brands[9] = "Ford";
	}
    
    public List&lt;Car&gt; createCars(int size) {
        List&lt;Car&gt; list = new ArrayList&lt;Car&gt;();
		for(int i = 0 ; i &lt; size ; i++) {
			list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
        }
        
        return list;
    }
    
    private String getRandomId() {
		return UUID.randomUUID().toString().substring(0, 8);
	}
    
    private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}
	
	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}
	
	private String getRandomBrand() {
		return brands[(int) (Math.random() * 10)];
	}
    
    public int getRandomPrice() {
		return (int) (Math.random() * 100000);
	}
    
    public boolean getRandomSoldState() {
		return (Math.random() &gt; 0.5) ? true: false;
	}

    public List&lt;String&gt; getColors() {
        return Arrays.asList(colors);
    }
    
    public List&lt;String&gt; getBrands() {
        return Arrays.asList(brands);
    }
}
                    </pre>
                </p:tab>
            </p:accordionPanel>
        </pm:content>
    </ui:define>
    
</ui:composition>